<template>
    <div class="out">
      <ul class="nav__tagul">
        <li v-for="(item, index) in curlist" :key="index">
          <router-link :to="'/blobtaglist/' + item.tagid">
            <span>{{ item.tag }}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </template>
  <script>
  export default {
    name: "tagHeader",
    data() {
      return {
        curlist: [],
      };
    },
    watch: {
      $route: {
        handler(route) {
          // this.$store.dispatch("user/gettaglist").then(() => {
          //   if (this.$store.getters.taglist[this.$route.path]) {
          //     this.curlist = this.$store.getters.taglist[this.$route.path];
          //   } else {
          //     this.curlist = this.$store.getters.taglist["default"];
          //   }
          // });
          const mockdata = { "/": [
                { tag: "java1", tagid: 1 },
                { tag: "C++1", tagid: 2 }
            ], "/neitui": [
                { tag: "java2", tagid: 1 },
                { tag: "C++2", tagid: 2 }
            ], "default": [{ tag: "javad", tagid: 1 },
            { tag: "C++d", tagid: 2 }]};

          this.curlist = mockdata[this.$route.path] || mockdata["default"]
        },
        immediate: true,
      },
    },
    props: ["taglist"],
  };
  </script>
  <style lang="scss" scoped>
  .out {
    height: 30px;
    overflow-y: hidden;
  }
  .nav__tagul {
    margin: 10px auto 10px auto;
    list-style: none;
    &:after {
      display: block;
      clear: both;
      content: "";
    }
    li {
      float: left;
      width: 100px;
      box-sizing: border-box;
      padding: 0px;
      margin-right: 5px;
      background-color: rgba(10, 10, 10, 0.1);
    }
    span {
      text-decoration: none;
    }
    a {
      text-decoration: none;
      padding: 30px;
      font-weight: bold;
      color: #2c3e50;
    }
  
    a.router-link-exact-active {
      color: #42b983;
    }
  }
  </style>